<template>
  <div class="properComp">
    <a-row :gutter="30" v-if="moduleType === '风险'">
      <a-col :span="12" class="projectSelect">
        <div class="properName">项目类别：</div>
        <div class="properContent">
          <a-select
            v-model="projectTypeDefault"
            style="width: 100%"
            @change="handProjectType"
          >
            <a-select-option
              v-for="(datas, num) in projectTypeData"
              :key="num"
              :value="datas.name"
            >
              {{ datas.displayName }}
            </a-select-option>
          </a-select>
        </div>
      </a-col>
    </a-row>
    <div class="fromBox" v-for="(item, index) in fromData" :key="index">
      <a-divider orientation="left" class="modalTitle" v-show="isShow">
        {{ item.label }}
      </a-divider>
      <a-row
        v-for="(itm, idx) in item.rows"
        :key="idx"
        :gutter="30"
        class="fromRow"
      >
        <a-col v-for="(im, ix) in itm.items" :key="ix" :span="12">
          <div v-if="im.specialVisible ? false : true" class="fromItem">
            <div class="properName" v-if="im.id !== 'ImportantGrade' && im.id !== 'RequirementsSource' &&  im.id !== 'ProjectBonus' && im.id !== 'TechnologySpecialty' && im.id !== 'isEquipmentModification' && im.id !== 'IslightPlant'">
              <span v-if="im.required" style="color: red">*</span>
              <span v-else style="opacity: 0">*</span>
              {{ im.label }}：
            </div>
            <div class="properName" v-if="im.id === 'ImportantGrade' && projectTypeDefault !== 'cn.com.sany.RDImprovementProject' && (!smallTypeIsDisplay || smallTypeIsDisplay == '新工艺')">
              <span v-if="im.required" style="color: red">*</span>
              <span v-else style="opacity: 0">*</span>
              {{ im.label }}：
            </div>
            <div class="properName" v-if="im.id === 'ImportantGrade' && projectTypeDefault === 'cn.com.sany.RDImprovementProject' && isDislay">
              <span v-if="im.required" style="color: red">*</span>
              <span v-else style="opacity: 0">*</span>
              {{ im.label }}：
            </div>
            <!--需求来源 项目奖金  工艺专业-->
            <div class="properName" v-if="(im.id === 'RequirementsSource' && ( !smallTypeIsDisplay || smallTypeIsDisplay == '厂内物流')) || (im.id==='ProjectBonus' && ( !smallTypeIsDisplay || smallTypeIsDisplay == '新工艺')) || (im.id ==='TechnologySpecialty' &&( !smallTypeIsDisplay || smallTypeIsDisplay == '技改')) || (im.id == 'isEquipmentModification' &&  smallTypeIsDisplay != '厂内物流') || (im.id == 'IslightPlant' &&  smallTypeIsDisplay != '新工艺')">
              <span v-if="im.required" style="color: red">*</span>
              <span v-else style="opacity: 0">*</span>
              {{ im.label }}：
            </div>
            <div class="properContent">
              <!-- 输入框 im.label === '编码' ? '自动生成' : '请输入' + im.label-->
            <a-input
                v-if="im.formType === 'text' && (im.id !== 'ProjectBonus' || (im.id === 'ProjectBonus' && (!smallTypeIsDisplay || smallTypeIsDisplay=='新工艺')))"
                :placeholder="handData(im)"
                :disabled="
                  (im.label === '编码' ? true : false) ||
                    (im.specialVisible ? true : false)
                "
                :class="im.required && !requireObj[im.id] && beforeSubmit ? 'requiredInput' : ''"
                v-model="requireObj[im.id]"
              >
              </a-input>
              <!-- 下拉框 -->
              <a-select
                :placeholder="handData(im)"
                v-else-if="im.formType === 'select' &&  im.id !== 'ImportantGrade' && im.id !== 'nsegmenttype' && im.id !== 'ProductCategory' && im.id !== 'projectGroupReference' 
                && im.id !== 'ProjectSmallType' && im.id !== 'PlanningYear' && im.id !== 'costreducecategory'  && im.id !== 'RequirementsSource' && im.id !=='TechnologySpecialty'"
                v-model="requireObj[im.id]"
                style="width: 100%"
                @change="selectChange"
                :disabled="im.specialVisible ? true : false"
                 :class="im.required && !requireObj[im.id] && beforeSubmit ? 'requiredInput' : ''"
              >
                <a-select-option
                  v-for="(selItem, selNum) in im.selects"
                  :key="selNum"
                  :value="selItem"
                >
                  {{ selNum }}
                </a-select-option>
              </a-select>
              <!-- 下拉框 产品类别-->
              <a-select
                :placeholder="handData(im)"
                v-else-if="im.formType === 'select' && im.id === 'ProductCategory'  "
                v-model="requireObj[im.id]"
                style="width: 100%"
                @change="selectChange"
                :showSearch="showSearch"
                :disabled="im.specialVisible ? true : false"
                :class="im.required && !requireObj[im.id] && beforeSubmit ? 'requiredInput' : ''"
              >
                <a-select-option
                  v-for="(selItem, selNum) in im.selects"
                  :key="selNum"
                  :value="selItem"
                >
                  {{ selNum }}
                </a-select-option>
              </a-select>
              <!-- 下拉框 项目小类-->
              <a-select
                :placeholder="handData(im)"
                v-else-if="im.formType === 'select' && im.id === 'ProjectSmallType'  "
                v-model="requireObj[im.id]"
                style="width: 100%"
                @change="selectChangeType"
                :showSearch="showSearch"
                :class="im.required && !requireObj[im.id] && beforeSubmit ? 'requiredInput' : ''"
                :disabled="im.specialVisible ? true : false"
              >
                <a-select-option
                  v-for="(selItem, selNum) in im.selects"
                  :key="selNum"
                  :value="selItem"
                >
                  {{ selNum }}
                </a-select-option>
              </a-select>
              <!-- 下拉框 所属组织-->
              <a-select
                :placeholder="handData(im)"
                v-else-if="im.formType === 'select' && (im.id === 'projectGroupReference' || im.id === 'PlanningYear')"
                v-model="requireObj[im.id]"
                style="width: 100%"
                @change="selectChangeGroup"
                :showSearch="showSearch"
                 optionFilterProp="children"
                :class="im.required && !requireObj[im.id] && beforeSubmit ? 'requiredInput' : ''"
                :disabled="im.specialVisible ? true : false"
              >
                <a-select-option
                  v-for="(selItem, selNum) in im.selects"
                  :key="selNum"
                  :value="selItem"
                >
                  {{ selNum }}
                </a-select-option>
              </a-select>
              <!-- 下拉框 重要等级-->
              <a-select
                :placeholder="handData(im)"
                v-else-if="im.formType === 'select' &&  im.id === 'ImportantGrade'&& projectTypeDefault !== 'cn.com.sany.RDImprovementProject' && projectTypeDefault !== 'cn.com.sany.PartsDevelopmentProject' && (!smallTypeIsDisplay || smallTypeIsDisplay == '新工艺')"
                v-model="requireObj[im.id]"
                style="width: 100%"
                @change="selectChange"
                :class="im.required && !requireObj[im.id] && beforeSubmit ? 'requiredInput' : ''"
                :disabled="im.specialVisible ? true : false"
              >
                <a-select-option
                  v-for="(selItem, selNum) in im.selects"
                  :key="selNum"
                  :value="selItem"
                >
                  {{ selNum }}
                </a-select-option>
              </a-select>
               <!-- 下拉框 重要等级 产品研发提升项目-->
              <a-select
                :placeholder="handData(im)"
                v-else-if="im.formType === 'select' &&  im.id === 'ImportantGrade' && projectTypeDefault === 'cn.com.sany.RDImprovementProject' && isDislay"
                v-model="requireObj[im.id]"
                style="width: 100%"
                @change="selectChange"
                 :class="im.required && !requireObj[im.id] && beforeSubmit ? 'requiredInput' : ''"
                :disabled="im.specialVisible ? true : false"
                @focus="gradeFocus"
              >
                <a-select-option
                  v-for="(selItem, selNum) in slelectList"
                  :key="selNum"
                  :value="selItem" 
                >
                  {{ selItem }}
                </a-select-option>
              </a-select>
              <!-- 下拉框 重要等级 关键零部件项目-->
              <a-select
                :placeholder="handData(im)"
                v-else-if="im.formType === 'select' &&  im.id === 'ImportantGrade' && projectTypeDefault === 'cn.com.sany.PartsDevelopmentProject'"
                v-model="requireObj[im.id]"
                style="width: 100%"
                @change="selectChange"
                 :class="im.required && !requireObj[im.id] && beforeSubmit ? 'requiredInput' : ''"
                :disabled="im.specialVisible ? true : false"
                @focus="gradeFocus"
              >
                <a-select-option
                  v-for="(selItem, selNum) in slelectList"
                  :key="selNum"
                  :value="selItem" 
                >
                  {{ selItem }}
                </a-select-option>
              </a-select>
               <!-- 下拉框 细分类型-->
              <a-select
                :placeholder="handData(im)"
                v-else-if="im.formType === 'select' &&  im.id === 'nsegmenttype' && projectTypeDefault !== 'cn.com.sany.RDImprovementProject' && projectTypeDefault !== 'cn.com.sany.TechnologyDevProject'"
                v-model="requireObj[im.id]"
                style="width: 100%"
                @change="selectChange"
                 :class="im.required && !requireObj[im.id] && beforeSubmit ? 'requiredInput' : ''"
                :disabled="im.specialVisible ? true : false"
              >
                <a-select-option
                  v-for="(selItem, selNum) in im.selects"
                  :key="selNum"
                  :value="selItem"
                >
                  {{ selNum }}
                </a-select-option>
              </a-select>
               <!-- 下拉框 细分类型 产品研发提升项目-->
              <a-select
                :placeholder="handData(im)"
                v-else-if="im.formType === 'select' &&  im.id === 'nsegmenttype' && (projectTypeDefault === 'cn.com.sany.RDImprovementProject' || projectTypeDefault === 'cn.com.sany.TechnologyDevProject')"
                v-model="requireObj[im.id]"
                style="width: 100%"
                @change="selectChange"
                 :class="im.required && !requireObj[im.id] && beforeSubmit ? 'requiredInput' : ''"
                :disabled="im.specialVisible ? true : false"
                @focus="gradeFocus"
              >
                <a-select-option
                  v-for="(selItem, selNum) in nsegmenttypeList"
                  :key="selNum"
                  :value="selItem" 
                >
                  {{ selItem }}
                </a-select-option>
              </a-select>
              <!-- 下拉框 降本品类-->
              <a-select
                :placeholder="handData(im)"
                v-else-if="im.formType === 'select' &&  im.id === 'costreducecategory'&& projectTypeDefault !== 'cn.com.sany.RDImprovementProject'"
                v-model="requireObj[im.id]"
                style="width: 100%"
                @change="selectChange"
                 :class="im.required && !requireObj[im.id] && beforeSubmit ? 'requiredInput' : ''"
                :disabled="im.specialVisible ? true : false"
              >
                <a-select-option
                  v-for="(selItem, selNum) in im.selects"
                  :key="selNum"
                  :value="selItem"
                >
                  {{ selNum }}
                </a-select-option>
              </a-select>
               <!-- 下拉框 降本品类 关键零部件开发项目-->
              <a-select
                :placeholder="handData(im)"
                v-else-if="im.formType === 'select' &&  im.id === 'costreducecategory' && projectTypeDefault === 'cn.com.sany.RDImprovementProject'"
                v-model="requireObj[im.id]"
                style="width: 100%"
                @change="selectChange"
                 :class="im.required && !requireObj[im.id] && beforeSubmit ? 'requiredInput' : ''"
                :disabled="im.specialVisible ? true : false"
                @focus="gradeFocus"
              >
                <a-select-option
                  v-for="(selItem, selNum) in costreduceList"
                  :key="selNum"
                  :value="selItem" 
                >
                  {{ selItem }}
                </a-select-option>
              </a-select>
              <!-- 下拉框 需求来源 制造工艺提升项目 场内物流展示  工艺专业-->
              <a-select
                :placeholder="handData(im)"
                v-else-if="im.formType === 'select' && ((im.id === 'RequirementsSource' && (!smallTypeIsDisplay || smallTypeIsDisplay=='厂内物流') ||(im.id === 'TechnologySpecialty' && (!smallTypeIsDisplay || smallTypeIsDisplay=='技改' )))) "
                v-model="requireObj[im.id]"
                style="width: 100%"
                 :class="im.required && !requireObj[im.id] && beforeSubmit ? 'requiredInput' : ''"
                :disabled="im.specialVisible ? true : false"
              >
                <a-select-option
                  v-for="(selItem, selNum) in im.selects"
                  :key="selNum"
                  :value="selItem" 
                >
                  {{ selItem }}
                </a-select-option>
              </a-select>
              <!-- 下拉框 项目模板 -->
              <!-- 文本域 -->
              <a-textarea
                v-else-if="im.formType === 'textArea'"
                :placeholder="handData(im)"
                :auto-size="{ minRows: 2, maxRows: 2 }"
                v-model="requireObj[im.id]"
                 :class="im.required && !requireObj[im.id] && beforeSubmit ? 'requiredInput' : ''"
              />
              <!-- 时间选择 -->
              <a-date-picker
                :placeholder="handData(im)"
                style="width: 100%"
                :disabledDate="disabledStartDate"
                valueFormat="YYYY/MM/DD"
                v-model="requireObj[im.id]"
                v-else-if="im.formType === 'Date'"
                @change="timeChange(im)"
                @focus="timeFocus(im)"
                 :class="im.required && !requireObj[im.id] && beforeSubmit ? 'requiredInput' : ''"
              />
              <!-- 单选 -->
              <a-radio-group
                v-else-if="im.formType === 'radio' && ((im.id != 'isEquipmentModification' && im.id != 'IslightPlant') || (im.id =='isEquipmentModification' && smallTypeIsDisplay != '厂内物流')  || ( im.id == 'IslightPlant' && smallTypeIsDisplay != '新工艺'))"
                name="radioGroup"
                v-model="requireObj[im.id]"
                @change="raidoChange(requireObj[im.id],im.id)"
              >
                <a-radio
                  v-for="(radioItem, radioNum) in im.selectArr"
                  :key="radioNum"
                  :value="radioItem"
                >
                  {{ radioItem }}
                </a-radio>
              </a-radio-group>
              <!-- 输入框 im.label === '编码' ? '自动生成' : '请输入' + im.label-->
              <a-input
                v-if="im.formType === 'modal'"
                :placeholder="handData(im)"
                
                :allowClear="allowClear"
                class="modalInput"
                v-model="inputValue[im.id]"
                @click="showModal(im)"
                :class="im.required && !requireObj[im.id] && beforeSubmit ? 'requiredInput' : ''"
              >
                <a-tooltip slot="suffix" title="点击输入框查询">
                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
                </a-tooltip>
              </a-input> 
              
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script>
import { Message } from "ant-design-vue";
import { getImportantGrade } from "@api/singleProject"
let userinfo = JSON.parse(sessionStorage.getItem('userInfo'))
export default {
  name: "properComp",
  data() {
    return {
      projectTypeDefault: "",
      slelectList: [],
      nsegmenttypeList: [],
      showSearch: true,
      endDate: '',
      showSearch1: true,
      allowClear: true,
      costreduceList: [],
      isDislay: true,
      smallTypeIsDisplay: "",
    };
  },
  props: {
    moduleType: {
      // 判断是项目、风险、问题等模块
      type: String,
      default: "",
    },
    projectTypeData: {
      type: Array,
      default: () => [],
    },
    fromData: {
      type: Array,
      default: () => [],
    },
    requireObj: {
      type: Object,
      default: () => {},
    },
    isShow: {
      type: Boolean,
      default: true
    },
    inputValue: {
      type: Object,
      default: () => {},
    },
    beforeSubmit: {
      type: Boolean,
      defalut: false,
    },
    isEditPage: {
      type: Boolean,
      defalut: false,
    }
  },
  watch: {
    projectTypeData(val, oldVal) {
      this.projectTypeDefault = val[0].name;
    },
    "requireObj.ProjectSmallType": {
      handler(val) {
        if(val && this.isEditPage && this.projectTypeDefault === "cn.com.sany.ProcessImprovementProject") {
          if(val.indexOf("新工艺技术项目") != -1) {
            this.smallTypeIsDisplay = "新工艺"
          } else if(val.indexOf("技改") != -1) {
            this.smallTypeIsDisplay = "技改"
          } else {
            this.smallTypeIsDisplay = "厂内物流"
          }
        }
      },
      deep:true
    } 
  },
  mounted() {
  },
  methods: {
    // 改变项目类型
    handProjectType(val) {
      this.projectTypeDefault = val;
      this.$emit("handProjectType", val);
      this.smallTypeIsDisplay = ""
    },
    selectChange(val) {
      this.$emit("selectChange", val);
    },
    // 改变项目小类
    selectChangeType(val){
      if(this.projectTypeDefault === "cn.com.sany.RDImprovementProject"){
        this.requireObj.ImportantGrade = ""
        this.requireObj.nsegmenttype = ""
        this.requireObj.costreducecategory = ""
        if(val === "创新降本"){
          this.requireObj.ImportantGrade = "C"
          this.isDislay = false
          // this.nsegmenttypeList = []
        }else{
          this.requireObj.ImportantGrade = ""
          this.isDislay = true
        }
      }
      if(this.projectTypeDefault === "cn.com.sany.TechnologyDevProject"){
        this.requireObj.nsegmenttype = ""
      } 
      if(this.projectTypeDefault === "cn.com.sany.PartsDevelopmentProject"){
        this.requireObj.ImportantGrade = ""
        // this.requireObj.costreducecategory = ""
        // if(val === "创新降本"){
        //   this.requireObj.ImportantGrade = "C"
        //   this.isDislay = false
        // }else{
        //   this.requireObj.ImportantGrade = ""
        //   this.isDislay = true
        // }
      }
      if(this.projectTypeDefault === "cn.com.sany.ProcessImprovementProject") {
        if(val.indexOf("新工艺技术项目") != -1) {
          this.smallTypeIsDisplay = "新工艺"
        } else if(val.indexOf("技改") != -1) {
          this.smallTypeIsDisplay = "技改"
        } else {
          this.smallTypeIsDisplay = "厂内物流"
        }
      }
    },
    // 所属组织
    selectChangeGroup(val){
      this.requireObj.ReleatedPlanningBook = ""
      this.inputValue.ReleatedPlanningBook = ""
      this.requireObj.ReleatedPlanningProject = ""
      this.inputValue.ReleatedPlanningProject = ""
    },
    // 时间选择框
    timeChange(val, timeString) {
      this.$emit("timeChange", timeString);
    },
    // 单选
    raidoChange(val,type) {
      //单选框字段为是否为设备改造
      if(type === "isEquipmentModification") {
        this.requireObj.isEquipmentModification = val
      } else  if(type === "IslightPlant") {
        this.requireObj.IslightPlant = val
      } else {
        this.$emit("raidoChange", val);
      }
    },
    // 研发提升项目的重要等级
    gradeFocus() {
      if(!this.requireObj.ProjectSmallType){
        Message.error("请先选择项目小类")
        return 
      }
      let params = {
        userId: userinfo.loginName,
        name: "ProjectSmallType",
        value: this.requireObj.ProjectSmallType
      }
      getImportantGrade(params).then(res=>{
        if(res.status === 200){
          res.data.data.forEach(item=>{
            if(item.name === "nsegmenttype"){
              this.nsegmenttypeList = item.selects
            }else if(item.name === "ImportantGrade"){
              this.slelectList = item.selects
            }else if(item.name === "costreducecategory"){
              this.costreduceList = item.selects
            }
          })
        }
      })
    },
    timeFocus(im){
      this.endDate = im.id
    },
    // 时间
    disabledStartDate(endValue) {
      if(this.endDate === "planEndDate"){
        const startValue = new Date(this.requireObj.planStartDate)
        // if(!endValue || !startValue){
        //   return false
        // }
        return startValue.valueOf() > endValue.valueOf();
      }else if (this.endDate === "planStartDate"){
        const startValue = new Date(this.requireObj.planEndDate)
        // if(startValue){
        //   return endValue.valueOf() > startValue.valueOf() ;
        // }
        return endValue.valueOf() > startValue.valueOf() ;
      }else if (this.endDate === "scheduledEndDate"){
        const startValue = new Date(this.requireObj.planEndDate)
        // if(!endValue || !startValue){
        //   return false
        // }
        return startValue.valueOf() > endValue.valueOf();
      }
    },
    // 弹框
    showModal(val) {
      this.$emit("showModal", val);
    },
    // 处理placeholder数据
    handData(im) {
      if (im.formType === "text" || im.formType === "textArea") {
        if (im.label === "编码") {
          return "自动生成";
        } else {
          return "请输入" + im.label;
        }
      } else if (
        im.formType === "modal" ||
        im.formType === "select" ||
        im.formType === "Date"
      ) {
        return "请选择" + im.label;
      }
    },
  }
};
</script>
<style lang="less" scoped>
.properComp {
  // padding: 24px;
  .fromBox {
    // padding: 0px 20px;
    .modalTitle {
      font-size: 18px;
      font-weight: 600;
    }
    .fromRow {
      margin-bottom: 12px;
      .fromItem {
        display: flex;
        align-items: flex-start;
        .properName {
          width: 12vw;
          min-width: 100px;
          line-height: initial;
        }
        .properContent {
          flex: 1;
          
          .modalInput {
            // cursor: pointer;
            // background-color: #fff;
            /deep/ .ant-input {
              cursor: pointer;
            }
          }
        }
      }
      .requiredInput{
        /deep/.ant-input,/deep/.ant-select-selection,&.ant-input{
          // animation:myfirst 1 10s;
          background: rgb(232,240,253);
        }
      }
      @keyframes myfirst
      {
        from {background: rgb(232,240,253);}
        to {background: #fff;}
      }
    }
  }
  .fromBox {
    /deep/ .ant-divider-horizontal.ant-divider-with-text-left::before {
      width: 2%;
    }
  }
  .projectSelect {
    display: flex;
    margin-bottom: 10px;
    .properName {
      width: 12vw;
      min-width: 100px;
      line-height: initial;
    }
    .properContent {
      flex: 1;
    }
  }
}
</style>